import React from 'react'
import PropTypes from 'prop-types'
// import { withRouter } from 'react-router-dom'

import { MenuWrap } from './StyledMenu'

// @withRouter 函数式组件不能在这里写，函数式组件不写逻辑，
const MenuList = (props) => {
  const { cate, curCate, onAsideClick, onGoToList } = props
  // Object.keys(this.state.cate['category']) 取出key时 顺序是否变化了
  return (
    <MenuWrap width="1px 0 0 0" color="#efefef">
      <aside>
        <ul>
          {
            cate && Object.keys(cate).map((value, index) => {
              return (
                <li
                  className={curCate === value ? 'active': ''} 
                  key={index}
                  onClick={onAsideClick(value)}
                ><span>{value}</span></li>
              )
            })
          }
        </ul>
      </aside>
      <section>
        <ul>
          {
           cate && curCate && cate[curCate].map((value, index) => (<li key={index} onClick={onGoToList(value)}>{value}</li>))
          }
        </ul>
      </section>
    </MenuWrap>
  )
}

MenuList.prototype = {
  cate: PropTypes.array,
  curCate: PropTypes.string,
}

// export default withRouter(MenuList)
export default MenuList